<template>
  <a-card :bordered="false" >
    <div>
      <a-row :gutter="10">
        <a-col :md="12" :sm="24">
          <!-- <excel-import-template-left @currentChange="handleCurrentChange" /> -->
          <vxe-grid
            id="ExcelImportTemplateLeft"
            ref="vxeTable"
            :row-config="{isCurrent:true}"
            v-bind="options"
            @checkbox-change="onSelectChange"
            @checkbox-all="onSelectChange"
            @page-change="handlePageChange"
            @current-change="handleCurrentChange"
          >
            <template v-slot:toolbar_buttons>
              <div class="table-operator">
                <a-button icon="plus" class="theme--perfect-button" @click="handleAdd">添加</a-button>
                <a-button v-if="selectionRows.length>0" type="danger" ghost icon="minus" class="theme--perfect-button" @click="batchDel">批量删除</a-button>
              </div>
            </template>
            <template #action="{ row }">
              <template>
                <a @click="handleEdit(row)">编辑</a>
                <a-divider type="vertical" />
                <a-dropdown>
                  <a class="ant-dropdown-link">
                    更多 <a-icon type="down" />
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a @click="handleCreateMappingRule(row)">生成规则映射</a>
                    </a-menu-item>
                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </template>
          </vxe-grid>
        </a-col>
        <a-col :md="12" :sm="24">
          <vxe-grid
            id="ExcelImportTemplateRight"
            ref="vxeTable2"
            v-bind="options"
            :columns="columnsRule"
            :data="currentData.mappingRules || []"
            :pager-config="false"
            @checkbox-change="onSelectChangeRule"
            @checkbox-all="onSelectChangeRule"
          >
            <template v-slot:toolbar_buttons>
              <div class="table-operator">
                <a-button icon="plus" class="theme--perfect-button" @click="handleAddRule">添加</a-button>
                <a-button v-if="selectionRowsRule.length>0" type="danger" ghost icon="minus" class="theme--perfect-button" @click="batchDelRule">批量删除</a-button>
              </div>
            </template>
            <template #action="{ row }">
              <template>
                <a @click="handleEditRule(row)">编辑</a>
                <a-divider type="vertical" />
                <a-dropdown>
                  <a class="ant-dropdown-link">
                    更多 <a-icon type="down" />
                  </a>
                  <a-menu slot="overlay">
                    <a-menu-item>
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDeleteRule(row)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </template>
            </template>
          </vxe-grid>
        </a-col>
      </a-row>
    </div>
    <ExcelImportMappingRulesModal ref="modalForm2" :template-data="currentData" @ok="modalFormOk" />
    <ExcelImportTemplateModal ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>
// import PageLayout from '@/layouts/PageLayout'
import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import ExcelImportTemplateModal from './modules/ExcelImportTemplateModal'
import ExcelImportMappingRulesModal from './modules/ExcelImportMappingRulesModal'
import { editExcelImport, createMappingRuleList, removeMappingRule } from '@/services/system'
import { getAction } from '@/services/manage'
export default {
  components: {
    // PageLayout,
    ExcelImportTemplateModal,
    ExcelImportMappingRulesModal
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      currentData: {},
      columns: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        {
          title: '方案编码',
          align: 'center',
          field: 'id',
          showOverflow: true
        },
        {
          title: '方案名称',
          align: 'center',
          field: 'name',
          showOverflow: true
        },
        {
          title: '数据源',
          align: 'center',
          field: 'entityManagerFactoryName',
          showOverflow: true
        },
        {
          title: '实体类',
          align: 'center',
          field: 'entityClassName',
          showOverflow: true
        },
        {
          title: 'Sheet页名称',
          align: 'center',
          field: 'excelSheetName',
          showOverflow: true
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          align: 'center',
          width: 120
        }
      ],
      columnsRule: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        {
          title: '名称',
          align: 'center',
          field: 'name',
          showOverflow: true
        },
        {
          title: 'Excel列号',
          align: 'center',
          field: 'excelColumn',
          showOverflow: true
        },
        {
          title: '实体属性',
          align: 'center',
          field: 'propertyName',
          showOverflow: true
        },
        {
          title: '前置',
          children: [
            {
              title: '解析器',
              align: 'center',
              field: 'cellPreParserBean',
              showOverflow: true
            },
            {
              title: '参数',
              align: 'center',
              field: 'cellPreParserParam',
              showOverflow: true
            }
          ]
        },
        {
          title: '后置',
          children: [
            {
              title: '解析器',
              align: 'center',
              field: 'cellPostParserBean',
              showOverflow: true
            },
            {
              title: '参数',
              align: 'center',
              field: 'cellPostParserParam',
              showOverflow: true
            }
          ]
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          align: 'center',
          width: 120
        }
      ],
      url: {
        list: '/excel/import/list',
        delete: '/excel/import/remove/',
        deleteBatch: '/excel/import/deleteBatch/'
      },
      selectedRowKeysRule: [],
      selectionRowsRule: []
    }
  },
  methods: {
    handleCurrentChange({ newValue }) {
      this.currentData = newValue
      this.resetRightSelect()
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.content || res.result
          this.ipagination.total = res.result.totalElements
          this.setCurrentData()
          this.resetRightSelect()
          this.onClearSelected()
        } else {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    setCurrentData() {
      this.$refs.vxeTable.clearCurrentRow()
      let currentRow
      if (Object.keys(this.currentData).length > 0) {
        this.dataSource.forEach(item => {
          if (this.currentData.id === item.id) {
            currentRow = JSON.parse(JSON.stringify(item))
          }
        })
      }
      !currentRow ? currentRow = this.dataSource[0] || {} : ''
      this.currentData = currentRow
      this.$refs.vxeTable.setCurrentRow(currentRow)
    },
    onSelectChangeRule({ records }) {
      this.selectedRowKeysRule = []
      records.forEach(item => {
        const rowId = this.$refs.vxeTable2.getRowid(item)
        this.selectedRowKeysRule.push(rowId)
      })
      this.selectionRowsRule = records
    },
    handleAddRule(record) {
      this.$refs.modalForm2.edit(record)
      this.$refs.modalForm2.title = '编辑'
      this.$refs.modalForm2.disableSubmit = false
    },
    handleEditRule(record) {
      this.$refs.modalForm2.edit(record)
      this.$refs.modalForm2.title = '编辑'
      this.$refs.modalForm2.disableSubmit = false
    },
    handleDeleteRule(row) {
      removeMappingRule(row.id).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.modalFormOk()
        }
      })
    },
    batchDelRule(rowIndex) {
      const data = JSON.parse(JSON.stringify(this.currentData.mappingRules))
      const mappingRules = []
      data.forEach(item => {
        if (this.selectedRowKeysRule.indexOf(item.id) < 0) {
          mappingRules.push(item)
        }
      })
      this.currentData.mappingRules = mappingRules
      editExcelImport(this.currentData).then(res => {
        if (res.success) {
          this.$message.success('操作成功')
          this.modalFormOk()
        }
      })
    },
    handleCreateMappingRule(data) {
      createMappingRuleList(data).then(res => {
        if (res.success) {
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    resetRightSelect() {
      this.selectedRowKeysRule = []
      this.selectionRowsRule = []
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/vxe-table-common.scss';
  // .theme--perfect-button{
  //   border: none;
  //   background: $vxe-table-header-background-color;
  //   box-shadow: none;
  // }
</style>
